<template>
  <div class="about">
    <h1>This is AntV X6 Demo</h1>
    <div class="h100">
      <h2>AntV X6 制作脑图，ER图，流程图</h2>

      <el-link type="primary" href="https://x6.antv.vision/zh/docs/tutorial/getting-started" target="_blank">使用文档</el-link>
      <span> | </span>
      <el-link type="primary" href="https://x6.antv.vision/zh/examples/gallery" target="_blank">业务场景</el-link>
      <span> | </span>
      <el-link type="primary" href="/test" target="_blank">测试页面</el-link>
      <span> | </span>
      <el-link type="primary" href="/testMod" target="_blank">测试模型页面</el-link>
      <div class="h100">
        <h4>下面是示例</h4>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="h100">
          <el-tab-pane label="基础引用" name="1">
            <el-button type="" @click="init">初始化画布</el-button>
            <el-button type="" @click="SVG">导出SVG</el-button>
            <el-button type="" @click="png">导出PNG/JPEG</el-button>
            <el-button type="" @click="dispose">销毁画布</el-button>
            <div id="container_1"></div>;
          </el-tab-pane>
          <el-tab-pane label="自定义常用类型" name="2">
            <Cell v-if="activeName=='2'"></Cell>
          </el-tab-pane>
          <el-tab-pane label="群组" name="3">
            <Group v-if="activeName=='3'"></Group>
          </el-tab-pane>
          <el-tab-pane label="G6Base" name="4">
            <G6Index v-if="activeName=='4'"></G6Index>
          </el-tab-pane>
          <el-tab-pane label="事件系统" name="5">
            <ActionSys v-if="activeName=='5'"></ActionSys>
          </el-tab-pane>
          <el-tab-pane label="自定义节点" name="6">
            <myNode v-if="activeName=='6'"></myNode>
          </el-tab-pane>
          <el-tab-pane label="自定义节点HTML渲染" name="7">
            <myNodeToHtml v-if="activeName=='7'">
            </myNodeToHtml>
          </el-tab-pane>
          <el-tab-pane label="自定义节点测试" name="8">
            <myNodeToTest v-if="activeName=='8'">
            </myNodeToTest>
          </el-tab-pane>

          <el-tab-pane label="脑图布局案例" name="9">
            <myMind v-if="activeName=='9'">
            </myMind>
          </el-tab-pane>
          <el-tab-pane label="layoutContainer" name="10">
            <layoutContainer v-if="activeName=='10'">
            </layoutContainer>
          </el-tab-pane>
          <el-tab-pane label="myActionNode" name="11">
            <myActionNode v-if="activeName=='11'">
            </myActionNode>
          </el-tab-pane>
          <el-tab-pane label="myCircleNode" name="13" class="h100">
            <myCircleNode v-if="activeName=='13'">
            </myCircleNode>
          </el-tab-pane>
          <el-tab-pane label="脑图树布局" name="14" class="h100">
            <treeNode v-if="activeName=='14'">
            </treeNode>
          </el-tab-pane>
          <el-tab-pane label="脑图长方形树布局" name="16" class="h100">
            <treeNode2 v-if="activeName=='16'">
            </treeNode2>
          </el-tab-pane>
          <el-tab-pane label="测试页面" name="12">
            <testWeb v-if="activeName=='12'">
            </testWeb>
          </el-tab-pane>
          <el-tab-pane label="测试three.js页面" name="15">
            <testWeb v-if="activeName=='15'">
            </testWeb>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
  </div>
</template>
<script>
//应用antV X6 核心
import { Graph, DataUri } from "@antv/x6";
import G6Index from "../components/G6/base.vue";
import Cell from "../components/X6/Cell.vue";
import Group from "../components/X6/Group.vue";
import ActionSys from "../components/X6/action.vue";
import myNode from "../components/X6/myNode.vue";
import myNodeToHtml from "@/components/X6/myNode_html.vue";
import Test from "../components/mod/html/test.vue";
import myNodeToTest from "../components/X6/myNode_testData.vue";
import myMind from "../components/X6/myMinx.vue";
import layoutContainer from "../components/X6/layoutContainer.vue";
import myActionNode from "@/components/X6/myActionNode.vue";
import myCircleNode from "@/components/X6/myCircleNode.vue";
import testWeb from "@/components/test.vue";
import treeNode from "./treeNode.vue";
import treeNode2 from "./treeNode2.vue";
import threeTest from "./threeTest.vue";
export default {
  name: "",
  components: {
    Cell,
    Group,
    G6Index,
    ActionSys,
    myNode,
    myNodeToHtml,
    Test,
    myNodeToTest,
    myMind,
    layoutContainer,
    myActionNode,
    testWeb,
    myCircleNode,
    treeNode,
    threeTest,
    treeNode2,
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init();
  },
  data() {
    return {
      activeName: "1",
      graph: "",
    };
  },
  methods: {
    init() {
      const data = {
        // 节点
        nodes: [
          {
            id: "node1", // String，可选，节点的唯一标识
            shape: "rect", // 使用 rect 渲染  样式图形
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "Hello",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node2", // String，节点的唯一标识
            shape: "ellipse", // 使用 ellipse 渲染  样式图形
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
          },
          {
            id: "node3", // String，节点的唯一标识
            x: 280,
            y: 240,
            width: 100,
            height: 40,
            attrs: {
              body: {
                fill: "#F39C12",
                stroke: "#000",
                rx: 16,
                ry: 16,
              },
              label: {
                text: "World",
                fill: "#333",
                fontSize: 18,
                fontWeight: "bold",
                fontVariant: "small-caps",
              },
            },
          },
        ],
        // 边
        edges: [
          {
            source: "node1", // String，必须，起始节点 id
            target: "node2", // String，必须，目标节点 id
            attrs: {
              //定制样式
              line: {
                stroke: "orange",
              },
            },
          },
          {
            source: "node2", // String，必须，起始节点 id
            target: "node3", // String，必须，目标节点 id
            shape: "double-edge", //修改边的样式
          },
        ],
      };
      let width = document.body.clientWidth; //网页可见区域宽：
      let height = document.body.clientHeight; //网页可见区域高：
      // 渲染画布
      const graph = new Graph({
        container: document.getElementById("container_1"),
        width,
        height: 900,
        panning: {
          enabled: true, //画布可以平移
          modifiers: "shift", //设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。
          //还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。
          eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
          //可以通过以下 API 来启用/禁止画布平移：
          // graph.isPannable() // 画布是否可以平移
          // graph.enablePanning() // 启用画布平移
          // graph.disablePanning() // 禁止画布平移
          // graph.togglePanning() // 切换画布平移状态
        },

        background: {
          color: "#fffbe6", // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        scroller: {
          // enabled: true,
        },
        minimap: {
          //小地图
          // enabled: true,
          // container: minimapContainer,
        },
      });
      graph.fromJSON(data);
      graph.zoom(0.8); //缩放，
      graph.translate(80, 40); //平移
      graph.centerContent(); //内容居中
      this.graph = graph;
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    SVG() {
      this.graph.toSVG((dataUri) => {
        // 下载
        console.log(dataUri);
        DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), "chart.svg");
      });
    },
    png() {
      this.graph.toPNG((dataUri) => {
        // 下载
        DataUri.downloadDataUri(dataUri, "chart.png");
      });
    },
    dispose() {
      this.graph.dispose();
    },
  },
};
</script>
<style>
.about {
  height: 100%;
  width: 100%;
}
.h100 {
  height: 100%;
  width: 100%;
}
.el-tabs__content {
  height: 100%;
  width: 100%;
}
</style>
